<div class="payrollDetails">
<table style="width: 825px; border-right-style: none; border-left-style: none;">
  <thead>
    <tr style="background:none">
      <th class="payrollDetailsHeader">${_employee.name}</th>
      <th class="rateHeader">
        <span class="rateHeaderContent">Rate: ${_employee.rate.description}</span>
      </th>
    </tr>
    <tr>
      #{if _employeePayrolls.keySet().contains(_employee.id)}
      <th>Payments (hrs)</th>
      <th>Deductions (value)</th>
      #{/if}
      #{else}
      <th colspan="2">No Payroll details. <a href="#" class="editEmployeePayroll" style="color:black" id="${_employee.id}-${_payrollPeriod.id}">Create now</a></th>
      #{/else}
    </tr>
  </thead>
  #{if _employeePayrolls.keySet().contains(_employee.id)}
  <tr style="border-style: solid; border-top-style: none;border-width: 1px; vertical-align: top;">
    <td>
    <table style="width: 400px; border-style: none;">
      #{list _paymentTypes, as:'paymentType'}
      #{if _employeePayments.get(_employee.id + paymentType.name)}
      <tr>
        <td>${paymentType.label}:</td>
        <td style="text-align: right;">${_employeePayments.get(_employee.id + paymentType.name)}</td>
      </tr>
      #{/if}
      #{/list}
    </table>
    </td>
    <td>
    <table style="width: 400px; border-style: none;">
      #{list _deductionTypes, as:'deductionType'}
      #{if _employeeDeductions.get(_employee.id + deductionType.name)}
      <tr>
        <td>&nbsp;${deductionType.label}:</td>
        <td style="text-align: right;">&nbsp;${_employeeDeductions.get(_employee.id + deductionType.name)}</td>
      </tr>
      #{/if}
      #{/list}
    </table>
    </td>
  </tr>
  <tr style="border-style: solid; border-top-style: none;border-width: 1px">
    <td><strong>Gross Income:</strong> ${_calculationResults.get(_employee.id).grossIncome.format('Php 0.00')}</td>
    <td><strong>Total Deduction:</strong> ${_calculationResults.get(_employee.id).totalDeduction.format('Php 0.00')}</td>
  </tr>
  <tr style="border-style: solid; border-top-style: none;border-width: 1px">
    <td colspan="2"><strong>Net Pay:</strong> ${_calculationResults.get(_employee.id).netPay.format('Php 0.00')}</td>
  </tr>
  #{/if}
  <tr style="border-style: solid; border-top-style: none;border-width: 1px">
    #{if _employeePayrolls.keySet().contains(_employee.id)}
    <td colspan="2"><a href="#" class="editEmployeePayroll" id="${_employee.id}-${_payrollPeriod.id}-${_employeePayrolls.get(_employee.id).id}">Edit</a></td>
    #{/if}
  </tr>
</table>
</div>
